<template>
  <div class="prompt-item-wrapper">
    <div class="item-info">
      <div class="logo">
        <img src="@/assets/img/logo.png" />
      </div>
      <div
        class="text"
        :title="props.prompInfo.name">
        {{ props.prompInfo.name }}
      </div>
    </div>
    <div class="btn-group">
      <el-button
        @click="jumpToChat"
        :icon="ChatLineSquare"
        >对话</el-button
      >
      <el-button
        @click="editPrompt"
        :icon="Edit"
        >编辑</el-button
      >
      <el-button
        @click="checkPrompt"
        :icon="View"
        >查看</el-button
      >
      <el-button
        :icon="Delete"
        @click="deletePrompt"
        v-if="!+props.prompInfo.isPreset"
        >删除</el-button
      >
    </div>
  </div>
</template>

<script setup>
  import { getCurrentInstance, ref, onMounted } from 'vue'
  import useAiChat from '@/store/aiChat'
  import { ElMessageBox } from 'element-plus'
  import { ChatLineSquare, Edit, View, Delete } from '@element-plus/icons-vue'

  const aiChatStore = useAiChat()
  const emit = defineEmits(['editSomePrompt', 'checkSomePrompt', 'deleteSomePrompt', 'jumpToChat'])
  const { proxy } = getCurrentInstance()
  const props = defineProps({
    prompInfo: {
      type: Object,
      default: {}
    }
  })
  /* =======方法======== */
  const editPrompt = () => {
    emit('editSomePrompt')
  }
  const checkPrompt = () => {
    emit('checkSomePrompt')
  }
  const deletePrompt = () => {
    ElMessageBox.confirm('删除后无法恢复，是否继续删除？', '', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        emit('deleteSomePrompt')
      })
      .catch(() => {})
  }
  const jumpToChat = () => {
    aiChatStore.jumpToChatWithRole(props.prompInfo)
  }
  onMounted(() => {})
</script>

<style scoped lang="scss">
  .prompt-item-wrapper {
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    height: pxTvh(104);
    padding: pxTvh(16) pxTvh(24);
    margin-bottom: pxTvh(16);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #101d3a;
    border: 1px solid transparent;
    border-radius: pxTvw(8);
    color: #cfdbfc;
    & > .item-info {
      display: flex;
      align-items: center;

      max-width: 60%;
      & > .logo {
        width: pxTvw(56);
        min-width: pxTvw(56);
        height: pxTvw(56);
        border-radius: pxTvw(8);
        background: rgba(41, 84, 243, 0.3);
        margin-right: pxTvw(24);
        display: flex;
        align-items: center;
        justify-content: center;
        & > img {
          width: 50%;
          height: 50%;
          margin: auto;
        }
      }
      & > .text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: pxTvw(800);
      }
    }
  }
</style>
